<?php echo $html->script(array("jquery.pagination.js", "jquery-ui.js")); ?>
<?php echo $this->Html->css('jquery.qtip'); ?>
<script type="text/javascript">
    
    function pageselectCallback(page_index, jq, items_per_page){
        page_index = page_index ==0 ? 1 : (page_index+1);
        var startIndex = parseInt(((page_index - 1) * items_per_page));
        var endIndex = parseInt(((page_index) * items_per_page));
        jQuery('#Searchresult ul').empty();
        jQuery('#hiddenresult ul li').each(function(i,obj){
            if(startIndex <= i && i < endIndex ){
                var new_content = jQuery(obj).clone();
                jQuery('#Searchresult ul').append(new_content);
            }
        });
        var totalPage = 0;
        try{
            totalPage = Math.ceil(parseInt(jQuery('#hiddenresult ul li').size())/items_per_page);
        }catch(ex){

        }
        jQuery('#pagePositionNum').empty().html('Page '+page_index+' of '+totalPage);
        return false;
    }

    // When document is ready, initialize pagination
    jQuery(document).ready(function(){
			
        jQuery('#viewNumPageItem ul li a').live('click',function(){
            var $href = jQuery(this).attr('href');
            $href = parseInt($href.replace('#',''));
            // count entries inside the hidden content
            var num_entries = jQuery('#hiddenresult ul li').length;
                    
            // Create content inside pagination element
            jQuery("#Pagination").empty().pagination(num_entries, {
                callback: pageselectCallback,
                items_per_page: $href // Show only one item per page
            });
            jQuery(this).closest('ul').find('li span').each(function(i,$this){
                var pageNum = jQuery(this).html();
                jQuery(this).closest('li').empty().html('<a href="#'+pageNum+'">'+pageNum+'</a>');
            });
            jQuery(this).closest('li').empty().html('<span>'+$href+'</span>');
            return false;
        }).eq(0).trigger('click') ;

        jQuery('#gotoPage button').click(function(){
            var $pageNum = parseInt(jQuery('#gotoPage input[type=text]').val());
            $pageNum = $pageNum - 1;
            jQuery("#Pagination").trigger('setPage', [$pageNum]);
        });
        //initPagination();
				
        jQuery("a.switch_thumb").toggle(function(){
            jQuery(".days_left").hide();
            jQuery(this).addClass("swap");
            jQuery("ul.display").fadeOut("fast", function() {
                jQuery(this).fadeIn("fast",function(){
                    jQuery(this).find('.content_block p').each(function(){
                        jQuery(this).find('span:eq(0)').appendTo(jQuery(this));
                    });
                }).addClass("thumb_view");
            });
        }, function () {
            jQuery(".days_left").show();
            jQuery(this).removeClass("swap");
            jQuery("ul.display").fadeOut("fast", function() {
                jQuery(this).fadeIn("fast",function(){
                    jQuery(this).find('.content_block p').each(function(){
                        jQuery(this).find('span:last').prependTo(jQuery(this));
                    });
                }).removeClass("thumb_view");


            });
        });
        // bind change event to select
        jQuery('#dynamic_select').bind('change', function () {
            var url = jQuery(this).val(); // get selected value
            if (url) { // require a URL
                window.location = url; // redirect
            }
            return false;
        });
    });

    var popupStatus1=0;
    var popupImg = false;
    var ajaxInstance = true; // 

    function showPop1(a){

        jQuery(".popupArrow1").hide().fadeOut();
        jQuery(".popupArrow2").hide().fadeOut();
        overlayDiv='z-index: 2; height: 100%; width: 100%; position: fixed;';
        //jQuery('#overlay_div').attr("style",overlayDiv);
        disablePopup1();
        centerPopup1(a);
        loadPopup1();

        var b="";var c="";var d="";
        var e="";var f="";
        if(jQuery(a).attr("title"))b=jQuery(a).attr("title");
        if(jQuery(a).attr("controller"))c=jQuery(a).attr("controller");
        if(jQuery(a).attr("action"))d=jQuery(a).attr("action");
        if(jQuery(a).attr("ElmID"))e=jQuery(a).attr("ElmID");

        var g=baseurl+c+"/";
        if(d!="")g+=d+"/";
        if(e!="")g+=e+"/";
        jQuery("#loader1").show();
	
        ajaxInstance = jQuery.ajax({
            url: g,  	  
            success: function(data){	  
                jQuery("#loader1").fadeOut("1");
                //jQuery(".gallery-container").fadeOut("1");
                jQuery("#popupItems1").fadeIn("1");
                jQuery("#popupItems1").html(data);
                var target=jQuery(a).position();
                var arrowLeft=target.left;
                if(arrowLeft>500){
                    jQuery(".popupArrow1").hide();
                    jQuery(".popupArrow2").show().fadeIn("300");
                }else{
                    jQuery(".popupArrow2").hide();
                    jQuery(".popupArrow1").show().fadeIn("300");
                }	
            } 
        });
    }

    function centerPopup1(a){
        var b=document.documentElement.clientWidth;
        var c=document.documentElement.clientHeight;
        var d=jQuery(".popupWrapper1").height();
        var e=jQuery(".popupWrapper1").width();
        left=b/2-e/2;

        //Scroll window
        var scrollTop=jQuery(window).scrollTop();
        var target=jQuery(a).position();
        var arrowTop=target.top;
        var arrowLeft=target.left;
        var top=scrollTop;
        /*if(arrowTop>290)
var top=arrowTop-290;
         */
        if(arrowTop<scrollTop)
        var top=scrollTop-290;
        //alert(c-top);
        //alert(" Top:"+top+" ArrowTop:"+arrowTop+" scrollTop:"+scrollTop);

        if(arrowLeft>500){
            //jQuery(".popupArrow2").show().fadeIn("300");
            //jQuery(".popupArrow1").hide();
            var diff=1087-arrowLeft;
            jQuery(".popupWrapper1").css({position:"absolute",top:top+"px",right:(diff-56)+"px"});
            jQuery(".popupArrow2").css({position:"absolute",top:(arrowTop+60)+"px",left:(arrowLeft+38)+"px"});
        }
        else{
            //jQuery(".popupArrow2").hide();
            //jQuery(".popupArrow1").show().fadeIn("300");
            jQuery(".popupWrapper1").css({position:"absolute",top:top+"px",left:(arrowLeft+159)+"px"});
            jQuery(".popupArrow1").css({position:"absolute",top:(arrowTop+70)+"px",left:(arrowLeft+130)+"px"});
        }
    }

    function disablePopup1(){
        if(popupStatus1==1){
            //var ajaxInstance = null;

            ajaxInstance.abort();
            //jQuery(ajaxInstance).ajaxStop(function(){console.log('ajax Stop'); });
            jQuery("#overlay_div").removeAttr("style");
            jQuery(".popupArrow1").hide();
            jQuery(".popupArrow2").hide();
            jQuery("#popupItems1").fadeOut("1");
            jQuery("#popupItems1").find("*").remove();
            jQuery(".popupWrapper1").removeAttr("style");
            jQuery(".popupWrapper1").fadeOut();
            jQuery(".gallery-container").hide().fadeOut("1");
            popupStatus1=0
        }
    }
    function loadPopup1(){
        if(popupStatus1==0){
            jQuery(".gallery-container").hide().fadeOut("1");
            jQuery(".popupWrapper1").show().fadeIn();
            jQuery("#popupItems1").show().fadeIn();
            popupStatus1=1
        }
    }

    jQuery(document).ready(function(){
        jQuery("a.popupClose1").click(function(){
            disablePopup1();
            return false});
        jQuery(".wrapper1").click(function(){
            disablePopup1()});
        jQuery(document).keypress(function(a){if(a.keyCode==27&&popupStatus1==1){disablePopup1()}})

        moreItem();
        moreItemSize();
    })
    //Sizes and Style Show more/less functionality
    //For Style
    var i=1;    
    var styleP=jQuery("#styleContent p");
    var length=styleP.length;    
    
    function moreItem(){
        styleP.show();
        styleP.each(function(index){
            if(index > i*4 && index < length){
                jQuery(this).hide();
            }
        });
        i++;
        menuHide(parseInt(jQuery("#styleContent p:hidden").length));
    }    
    function lessItem(){
        i=i-2;
        moreItem();
        menuHide(parseInt(jQuery("#styleContent p:hidden").length));
    }
    function menuHide(hiddenFields){
        diff=parseInt(length)-hiddenFields;
        if(diff<=5){
            jQuery(".less").hide();
            jQuery(".more").show();
            jQuery(".pipe").hide();
        }
        if(hiddenFields==0){
            jQuery(".less").show();
            jQuery(".more").hide();
            jQuery(".pipe").hide();
        }
        if(diff > 5 && hiddenFields > 0){
            jQuery(".less").show();
            jQuery(".more").show();
            jQuery(".pipe").show();
        }
    }
    if(length >= 5){
        jQuery("#styleContent").append('<p style="text-align: right;"><a onclick="lessItem()" class="less"> << Less</a><span class="pipe"> || </span><a onclick="moreItem()" class="more">More >></a></p>');
        }    
    
    //For SIzes
    var j=1;
    var sizeP=jQuery("#sizeContent p");
    var lengthSize=sizeP.length;
    function moreItemSize(){
        sizeP.show();
        sizeP.each(function(index){
            if(index > j*4 && index < lengthSize){
                jQuery(this).hide();
            }
        });
        j++;
        menuHideSize(parseInt(jQuery("#sizeContent p:hidden").length));
    }    
    function lessItemSize(){
        j=j-2;
        moreItemSize();
        menuHideSize(parseInt(jQuery("#sizeContent p:hidden").length));
    }    
    function menuHideSize(hiddenFields){
        diff=parseInt(lengthSize)-hiddenFields;
        if(diff<=5){
            jQuery(".lessSize").hide();
            jQuery(".moreSize").show();
            jQuery(".pipeSize").hide();
        }
        if(hiddenFields==0){
            jQuery(".lessSize").show();
            jQuery(".moreSize").hide();
            jQuery(".pipeSize").hide();
        }
        if(diff > 5 && hiddenFields > 0){
            jQuery(".lessSize").show();
            jQuery(".moreSize").show();
            jQuery(".pipeSize").show();
        }
    }    
    if(lengthSize >= 5){
        jQuery("#sizeContent").append('<p style="text-align: right;"><a onclick="lessItemSize()" class="lessSize"> << Less</a><span class="pipeSize"> || </span><a onclick="moreItemSize()" class="moreSize">More >></a></p>');
    }    
    
    //\Sizes and Style Show more/less functionality
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('img,div');
</script>
<![endif]-->
<style type="text/css">
    .more,.less,.moreSize,.lessSize{cursor: pointer;}
    th,th a{font-size:14px; font-weight:700; text-decoration:none;}
    .ui-tooltip-wiki{max-width: 550px;}
    .ui-tooltip-wiki .ui-tooltip-content{padding: 10px;line-height: 12.5px;}
    .ui-tooltip-wiki h1{margin: 0 0 7px;font-size: 1.5em;line-height: 1em;}
    .ui-tooltip-wiki img{ padding: 0 10px 0 0; }
    .ui-tooltip-wiki p{ margin-bottom: 9px; }
    .ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }
</style>
<a href="javascript:void(0);" class="popupArrow1">&nbsp;</a>
<a href="javascript:void(0);" class="popupArrow2">&nbsp;</a>
<div class="popupWrapper1">
    <a href="javascript:void(0);" class="popupClose1">&nbsp;</a>
    <div class="popupTop1">&nbsp;</div>
    <div class="popupContent1">
        <div id="loader1">loading...</div>
        <div class="popupScroller1">
            <div class="popContentWrapper1">
                <div class="allHolder1">
                    <div id="popupItems1" class="popupItems1">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popupBottom1">&nbsp;</div>
</div>